<template>
    <div class="bigbox">
        <div class="title mess">登录琪琪交友</div>
        <div class="username item mess">
            <div class="_username">账号</div>
            <div class="_username_content">
                <input type="text" class="_username_input input" name="username" v-model="username">
            </div>
        </div>
        <div class="password item mess">
            <div class="_password">密码</div>
            <div class="_password_content content">
                <input type="password" class="_password_input input" name="password" v-model="password">
            </div>
        </div>
        <div class="register_and_forgetpass mess">
            <router-link tag="div" active-class="" to="/register" class="">注册账号</router-link>
        </div>
        <div class="login" @click.stop="login">
            登录
        </div>

        <div class="beian"><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备20001005号-3</a></div>

    </div>
</template>

<script>
    import {select_user} from "../request/api";
    import Vue from 'vue';
    import {Toast} from 'vant';
    import Cookies from 'js-cookie';
    Vue.use(Toast).use(Cookies);
    export default {
        name: "login",
        data(){
          return{
                username:"",
                password:"",
                is_true_user:false,
                no_user:false,
                wran_pass:false,
          }
        },

        mounted() {

            //每次到login页面就查询所用户列表
                select_user(null).then(res=>{
                    this.$store.commit("setUserList",res.data);
                    console.log("在login中mounted",res.data);
                });
        },

        methods:{
            login(){
                for(let i=0;i<this.$store.state.userList.length;i++){
                    console.log(i);
                    for(let key in this.$store.state.userList[i]){
                        if((key === "username")){
                            if(this.username === this.$store.state.userList[i][key]){
                                if(this.password === this.$store.state.userList[i]["password"]){
                                            this.is_true_user=true;
                                }else{
                                            this.wran_pass=true;
                                }
                            }else{
                                            this.no_user=true;
                            }
                        }else{

                        }
                    }
                }

                if(this.is_true_user){
                    Cookies.set('username',this.username);
                    Cookies.set('password',this.password);
                    this.$router.replace("/center/friend");
                }else if(this.wran_pass){
                    Toast.fail("密码错误");
                }else if(this.no_user){
                    Toast.fail("用户名不存在")
                }
            },
        }
    }
</script>

<style scoped>
        .bigbox{display: flex;flex-direction: column;height: 100%;}
        .mess{margin-left: 17px;}
        .title{margin-top: 56px;font-size: 21px;}
        .item{display: flex;flex-direction: row;}
        .input{outline: none;border: none;background-color: white;margin-left: 55px;border-left: 1px solid #eadfdf;font-size: 17px;}
        .login{width: calc(100% - 6px);margin: 0 auto;height: 47px;background-color: #1aad19;font-size: 19px;color: white;line-height: 47px;text-align: center;border-radius: 5px;margin-top: 56px;}
        .username{margin-top: 50px;}
        ._username{font-size: 19px;line-height: 19px;}
        .password{margin-top: 40px;}
        ._password{font-size: 19px;}
        .content{margin-top: 4px;}
        .register_and_forgetpass{margin-top: 44px;font-size: 15px;color: #0060a8;}
        .beian{position: fixed;bottom: 30px;width: 100%;display: flex;justify-content: center;}
        .beian>a{}
</style>